

// useCallback 
// useCallback 真正目的是在于缓存实例函数方法  减少不必要的渲染 componentWillUpdate && shouldComponentUpdate

import React , {useState,useEffect,useRef,useCallback} from 'react';

const Hooks4 = () => {;
    let [count,setCount] = useState(1000)
    let [message,setMessage] = useState('2114 - 多多背诵面试题 ')
    let [list,setList] = useState(["Vue","React","Node"])
    let text = useRef()
    useEffect(()=>{
        console.log("组件初始化 - useEffect")
    },[message])

    // useCallback()  依赖某一个变量 某一个变量改变才会执行   shouldComponentUpdate
    const changeList = useCallback(()=>{
        console.log('count 改变了 ... ')
        return list.join("&");
    },[count])

    // 不写 [] 条件 retrun true 所有修改都可以更新 
    // [ ]  retrun false  所有修改都不可以更新
    // [list]  只有list 才会更新  监听List 值得改变  
    return (
        <div>
            <h2> useCallback  缓存某个方法   </h2>
            <h2> count === {count } </h2>
            <h2> message === { message} </h2>
            <hr/>
            <button onClick={()=>setCount(++count) }   >点击修改 count </button>
            <p>
                <input type="text"  ref={text}  onChange={()=>setMessage(text.current.value)}  value={message}  />
            </p>
            <h2>
                {list.join('-')}
            </h2>
            <button onClick={()=>setList(['原生JS',"小程序","Webpack-ES6"])}>点击修改list </button>
            
            <hr/>
            <ChildOne 
                count={count}
                message={message}
                list={list}
                changeList={changeList}
            >

            </ChildOne>
        </div>
    );
}

function ChildOne({
    list,
    message,
    count,
    changeList
}){
    return (
        <div>
            <h2> ChildOne - ChildOne - 1   </h2>
            <h2> count -- {count}</h2>
            <h2>message === {message} </h2>
            <h2>list -- {list.join('-')  }</h2>
            <h2>changeList --- {changeList()  }</h2>
        </div>
    )
}

export default Hooks4;
